<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <RowDelete/>
            </n-icon>
            <Handle id="DeleteRow-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="DeleteRow-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>删除行</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="删除行">
                <p>筛选所需删除行信息</p>
                <div class="ac" v-for="(index,item) in delete_info">
                    <div>
                        <n-radio-group v-model:value="way[item-1]" name="radioGroup" v-if="item">
                            <n-space>
                                <n-radio v-for="song in wayEnum" :key="song.value" :value="song.value">
                                    {{ song.label }}
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                        <n-select
                            v-model:value="index.column"
                            :options="props.data.data.title"
                            @update:value="popup.reopen"
                            placeholder="字段列"
                            label-field="title"
                            value-field="key"
                        />
                    </div>
                    <div>
                        <n-radio-group v-model:value="index.which" name="radioGroup">
                            <n-space>
                                <n-radio v-for="song in numberTextEnum" :key="song.value" :value="song.value"
                                         style="--n-box-shadow: inset 0 0 0 2px rgb(53, 53, 53);">
                                    {{ song.label }}
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </div>
                    <div>
                        <n-select
                            v-model:value="index.number.symbol"
                            :options="numberSymbolEnum"
                            @update:value="popup.reopen"
                        />
                        <n-select
                            v-model:value="index.text.symbol"
                            :options="textSymbolEnum"
                            @update:value="popup.reopen"
                        />
                        <n-select
                            v-model:value="index.date.symbol"
                            :options="dateSymbolEnum"
                            @update:value="popup.reopen"
                        />
                    </div>
                    <div>
                        <n-input-number v-model:value="index.number.value"/>
                        <n-input v-model:value="index.text.value"/>
                        <n-date-picker v-model:value="index.date.value" type="date" />
                    </div>

                </div>
                <n-radio-group v-model:value="delete_way" name="radioGroup">
                    <n-space>
                        <n-radio :value="'selected'" style="--n-box-shadow: inset 0 0 0 2px rgb(53, 53, 53);">
                            删除筛选行
                        </n-radio>
                        <n-radio :value="'outside'" style="--n-box-shadow: inset 0 0 0 2px rgb(53, 53, 53);">
                            删除筛选行之外的其它行
                        </n-radio>
                        <n-radio :value="'empty'" style="--n-box-shadow: inset 0 0 0 2px rgb(53, 53, 53);">
                            删除空
                        </n-radio>
                    </n-space>
                </n-radio-group>
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="addDeleteInfo">添加条件</n-button>
                        <n-button @click="implementation">执行</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {RowDelete} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
const wayEnum = [
    {label: "且", value: "and"},
    {label: "或", value: "or"},
]
const numberTextEnum = [
    {label: "数字", value: "number"},
    {label: "文本", value: "text"},
    {label: "日期", value: "date"},
]
const numberSymbolEnum = [
    {label: "等于", value: "="},
    {label: "大于", value: ">"},
    {label: "大于等于", value: ">="},
    {label: "小于等于", value: "<="},
    {label: "不等于", value: "!="},
    {label: "小于", value: "<"},
]
const dateSymbolEnum = [
    {label: "等于", value: "="},
    {label: "晚于", value: ">"},
    {label: "晚于或等于", value: ">="},
    {label: "早于或等于", value: "<="},
    {label: "不等于", value: "!="},
    {label: "早于", value: "<"},
]
const textSymbolEnum = [
    {label: "等于", value: "="},
    {label: "开头是", value: "开头是"},
    {label: "结尾是", value: "结尾是"},
    {label: "包含", value: "包含"},
    {label: "不等于", value: "!="},
    {label: "不包含", value: "不包含"},
]
const delete_info = ref([
    {
        column: "",
        number_or_text: "number",
        number: {symbol: "=", value: 0},
        date: {symbol: "=", value: null},
        text: {symbol: "=", value: ""},
        which:"",
        way: ""
    }
])
const way = ref([])

function addDeleteInfo() {
    delete_info.value.push({
        column: "",
        number_or_text: "number",
        number: {symbol: "=", value: 0},
        date: {symbol: "=", value: null},
        text: {symbol: "=", value: ""},
        way: "and"
    })
    way.value.push("and")
}

const delete_way = ref("selected")

function implementation() {
    workApi.post("perform_tasks/filter",{
        data:props.data.data,
        operation:{
            delete_info:delete_info.value,
            delete_way:delete_way.value,
            way:way.value
        }
    }).then(r=>{
        props.data.data = r.data
    })
}


// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            console.log(22)
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})


const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}

</script>

<style scoped lang="less">
.ac {
    width: 400px;
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;

    > div:nth-child(1) {
        flex: 100;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        top: -30px;
    }

    > div:nth-child(2) {
        flex: 55;
        padding-left: 10px;
    }

    > div:nth-child(3) {
        flex: 100
    }

    > div:nth-child(4) {
        flex: 100
    }
}
</style>
